<template>
  <div class="baseline">
    <a-card title="MCA系统数据库最近3小时平均每分钟请求次数" :bordered="false" :headStyle="{ padding: '0 15px', border:0}" style="width:100%">
      <ve-line
        :data="requestTakingData"
        :extend="chartExtend"
        :colors="requestTimeColors"
        :settings="requestSettings"
        :judge-width="true"
        height="170px"></ve-line>
    </a-card>
  </div>
</template>
<script>
// import { getSqlRequestCount } from '@/api/performance'
export default {
  name: 'MinuteBaseline',
  components: {

  },
  data () {
    return {
      requestTimeColors: [ '#4688f1', '#93c6ae', '#e8453c', '#749f83',
          '#ca8622', '#bda29a', '#6e7074',
          '#546570', '#c4ccd3'],
      requestSettings: {
        area: false
      },
      chartExtend: {
        title: {
          // text: '每日用户数',
          x: 'left',
          y: '-5px',
          textStyle: {
            fontSize: 13,
            fontWeight: 'bolder',
            color: '#333'// 主标题文字颜色
          }
        },
        dataZoom: [
          {
            type: 'inside'// inside表示内置的鼠标缩放滑动
          }
        ],
        grid: {
          top: '15%',
          left: '1%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        series: {
          barWidth: 10,
          symbolSize: 3, // 拐点节点大小
          showSymbol: false // 是否默认显示拐点
          // symbol: 'none',
        },
        yAxis: [
          {
            type: 'value',
            splitLine: { // 网格线
              lineStyle: {
                color: ['#555'],
                width: 1,
                type: 'dashed'// 设置网格线类型 dotted：虚线solid:实线
              },
              show: true // 隐藏或显示
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#666' // x轴字体颜色
              }
            }
          }
        ]
      },
      requestTakingData: {
        columns: ['时间', 'ecif', 'ecip'],
        rows: [
          { '时间': '12:01', 'ecif': 393, 'ecip': 1093 },
          { '时间': '12:02', 'ecif': 330, 'ecip': 330 },
          { '时间': '12:03', 'ecif': 2923, 'ecip': 623 },
          { '时间': '12:04', 'ecif': 723, 'ecip': 123 },
          { '时间': '12:05', 'ecif': 792, 'ecip': 1492 },
          { '时间': '12:06', 'ecif': 4593, 'ecip': 293 },
          { '时间': '12:07', 'ecif': 93, 'ecip': 293 },
          { '时间': '12:08', 'ecif': 493, 'ecip': 1293 },
          { '时间': '12:09', 'ecif': 93, 'ecip': 393 },
          { '时间': '12:10', 'ecif': 193, 'ecip': 493 },
          { '时间': '12:11', 'ecif': 293, 'ecip': 666 }
        ]
      }
    }
  },
  // 父组件传来的用户信息
  props: {
    timerDevice: {
      type: Number,
      default: null
    }
  },
  computed: {
  },
  created () {
    console.log('定时接受时间', this.timerDevice)
    if (this.timerDevice) {
      this.getInterval()
    }
  },
  mounted () {

  },
  methods: {
    getInterval () {
    // 轮询接口
    this.timers = window.setInterval(() => {
        setTimeout(res => {
          
        }, 0)// 利用定时器清除setInterval的每次叠加
      }, this.timerDevice * 1000)// 1分钟执行一次
      // // this.once在离开当前路由时销毁定时器
      this.$once('hook:beforeDestroy', () => {
        clearInterval(this.timers)
      })
    },
    // 合并两个数组中时间相同的对象
    mergeArrows (aAttr, bAttr) {
      aAttr.map(el => {
        el.ecip = bAttr.find(item => item.key === el.key).ecip
      })
      return aAttr
    }

  }
}
</script>

<style lang="less" scoped>
.trendstatis{
  p{
   color: rgba(0, 0, 0, 0.85);
   font-size: 14px;
  }
}
</style>
